.piece { background: #FFF; border-radius: 10px; padding: 20px; }

.page-content { animation:bounceInUp 1s ease-out .0s; }

.section-left { width: 200px; float: left; }
.section-center { width: 940px; margin-left: 40px; float: right; }


.section-left .head { line-height: 40px; color:#666; margin-top: -10px; margin-bottom: 20px; text-align: center; }

.search-wrap {  }
.search-wrap .layui-form-item { min-height: 40px; }
.search-wrap .layui-form-item.gender { text-align: center; }
.search-wrap .layui-form-item.gender .c-radio { margin:0; }
.search-wrap .layui-form-item.gender .c-radio input,
.search-wrap .layui-form-item.gender .c-radio .layui-form-radio .layui-icon{  display: none; }
.search-wrap .layui-form-item.gender .c-radio .layui-form-radio { display: inline-block; height: 30px; line-height: 30px; padding: 0 20px; margin: 0 5px; background: #F4F4F4; color:#666; border-radius: 20px; cursor: pointer;  }
.search-wrap .layui-form-item.gender .c-radio input[type='radio']:checked ~ .layui-form-radio { background-color: var(--color); color: #FFF; }


.search-wrap .layui-slider { margin-top: 5px; }
.search-wrap .slide-tips { font-size: 14px; color: #999;}
.search-wrap .layui-input, .layui-select, .layui-textarea { border-color:#EEE; border-radius: 5px; color: var(--color) }
.search-wrap .layui-form-selectup dl{ bottom:unset; }
.search-wrap .layui-btn { width: 100%; }
.search-wrap .layui-form-item .layui-input-inline { float:unset;width:unset;margin-right:unset; }

.search-wrap .vipsearch.novip .layui-form-item .layui-form-select:after { content: ""; position: absolute; top:0; left: 0; display: block; bottom:0; right: 0; cursor: pointer; }


.order-warp { position: relative;  }
.order-warp .nav { margin:-20px -20px;}
.order-warp .spread { position: absolute; top: 0; right: 0; padding: 20px; line-height: 20px; color: #999; }
.order-warp .spread a{ color:var(--color); }
.order-warp .spread .icon{ width: 20px; height: 20px; }


.spread .modebtn{ display: none; }
.spread[mode="list"]>.modebtn[mode="list"]{ display: block; }
.spread[mode="waterfall"]>.modebtn[mode="waterfall"]{ display: block; }






/*single-screen*/
.single-screen { background-color: #FFF; padding: 20px 0; position: relative; }
.single-screen .layui-form-label { font-size: 14px; }
.single-screen .layui-form-item .layui-input-inline { }
.single-screen .select-box .layui-input-inline { width: 140px }

.single-screen .btn-warp { position: absolute;top:20px; right: 20px; text-align: right; }
.single-screen .layui-btn { min-width: 50px; margin-left:5px; }

/*.single-screen { animation:fadeInRight 1s ease-out .0s; }*/

/*single-list*/
.single-list { margin-top:20px;   }
.single-list .single-item { background-color: #FFF; margin-top: 30px; position: relative; border-radius: 15px; padding: 30px; overflow: hidden; transition:all .5s; width: 100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}
.single-list .single-item:hover .photo-wrap img { transform:scale(1.2); transition:transform .5s; }
/*.single-list .single-item { animation:fadeInRight 1s ease-out .0s; }*/
.single-list .single-item .photo-wrap { overflow: hidden; float: left; width: 220px; height: 220px;  }
.single-list .single-item .photo-wrap img { width: 100%; height: 100%;background: #F1F1F1; border:none;}
.single-list .single-item .singleinfo { float: left; width: 550px; height: 220px; position: relative; padding-left: 20px; }
.single-list .single-item .head { margin-top:5px; line-height: 40px; }
.single-list .single-item .nickname { font-size: 20px; line-height: 30px; font-weight: 400; color: #444; }
.single-list .single-item .authbox { margin-left: 20px; }
.single-list .single-item .info {   font-size: 14px; color: #999; }
.single-list .single-item .info span {  border:1px solid var(--color); border-radius: 5px; padding: 2px 7px; line-height: 1; color: var(--color); margin-right: 2px; opacity: .7; }
.single-list .single-item .soliloquy { margin-top: 10px; line-height: 1.5; font-size: 14px; color: #999; }


.single-list .single-item .handle { position: absolute;bottom: 30px;right: 30px; }
.single-list .single-item .handle .layui-btn {  display: inline-block; padding: 0 15px;  background: unset; color: #666; height: 30px;line-height: 30px; margin:0 5px; border-radius: 15px;  border:1px solid #CCC; font-size: 12px;  }
.single-list .single-item .handle .layui-btn .icon { font-size: 1.1em; width: 1.4em; height: 1.4em; }
.single-list .single-item .handle .layui-btn:hover { transform:scale(1.1); }

.single-list .single-item .handle  .like.on .like-icon-on { display: inline-block; color: #F66; }
.single-list .single-item .handle  .like.on .like-icon-off { display: none; }


.single-list .single-item .pohtos { width: 400px; height: 45px; overflow:hidden;   line-height: 55px; color: #999; position: absolute; bottom: 10px; left: 20px;  }
.single-list .single-item .pohtos img {-moz-transform: rotate(35deg);-webkit-transform: rotate(35deg);-o-transform: rotate(35deg);transform: rotate(35deg);background: #F1F1F1;cursor: pointer;height: 40px;width: 40px;vertical-align: top;margin-top: 20px;margin-left: 10px;text-align: center;overflow: hidden;transform: none\0;}
.single-list .single-item .pohtos img:hover { margin-top: 10px; }

.single-list .single-item .district{ position:absolute;top:30px;right: 30px; color: #AAA; text-align: right; font-size:12px; }
.single-list .single-item .district .icon { width: 16px; height: 16px; }


.single-list .single-item .browse_num,
.single-list .single-item .album_num { position: absolute; top: 60px;  min-width: 40px; height: 24px; padding: 0 5px 0 10px; line-height: 24px; font-size: 12px;  border-radius:12px 0 0 12px; background-color: var(--color);
    background-image: -o-linear-gradient(284deg, var(--gradient) 0%, var(--gradient2) 100%);
    background-image: linear-gradient(166deg, var(--gradient) 0%, var(--gradient2) 100%); color: #FFF; right: -100px;transition:all .3s; }
.single-list .single-item .album_num { margin-top: 30px; }
.single-list .single-item:hover .browse_num,
.single-list .single-item:hover .album_num{ right: 0;  }

/*waterfall*/
.single-list[mode="waterfall"] { margin-right: -4%; }
.single-list[mode="waterfall"] .single-item{ width: 30%; float: left; margin-top:3.33333%; margin-right: 3.33333%; padding: unset; overflow: hidden; }
.single-list[mode="waterfall"] .single-item .photo-wrap { position:relative;width:100%;height:0;padding-top:100%; float: unset;}
.single-list[mode="waterfall"] .single-item .photo-wrap img {position:absolute;top:0;left:0;width:100%;height:100%}
.single-list[mode="waterfall"] .single-item .singleinfo { float: unset; width: unset;  height: 150px; padding: 0 20px 20px 20px;  }
.single-list[mode="waterfall"] .single-item .soliloquy { margin-top: 3px; font-size: 12px; }

.single-list[mode="waterfall"] .single-item .pohtos { display: none; }

.single-list[mode="waterfall"] .single-item .district { top: 10px; right: 10px; }

.single-list[mode="waterfall"] .single-item .head { margin-top:5px; line-height: 30px; }
.single-list[mode="waterfall"] .single-item .handle { position: absolute;bottom: 0;right: 0; left: 0; text-align: center; padding: 15px; }
.single-list[mode="waterfall"] .single-item .handle .layui-btn { padding: 0 10px; }
.single-list[mode="waterfall"] .single-item .handle .layui-btn .icon {  }

